
<template>
  <div class="breadcumb">
    <ul>
      <li v-for="(v, i) in breadList" :key="i">
        <router-link :to="{ path: v.path }">{{ v.meta.title }}</router-link>
        <span v-if="i < breadList.length - 1">/</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadList: [], // 路由集合
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  methods: {
    isHome(route) {
      return route.name === "Index";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      //如果不是首页
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/Index", meta: { title: "首页" } }].concat(matched);
      }
      this.breadList = matched;
    },
  },
  created() {
    this.getBreadcrumb();
  },
};
</script>


<style scoped>
.breadcumb {
  color: #909399;
  font-weight: 500;
  overflow: hidden;
  overflow-x: auto;
}
ul {
  list-style: none;
  display: inline;
  float: left;
  padding-left: 1px;
  margin: 1px 0 10px ;
}

ul li {
  display: inline-block;
}
</style>


